import React from 'react'
import Header from '../components/Header'
import {useState,useEffect,useRef} from "react"
import {useNavigate} from "react-router-dom"
import * as action from "../action"
import { Input, Space,Button } from 'antd';
import {useDispatch,useSelector} from "react-redux"
import { AudioOutlined } from '@ant-design/icons';
import {debounce, set} from "lodash"
const { Search } = Input;
function Home() {
     let [ipt,setIpt] = useState("")
     let navigate = useNavigate()
    let dispatch = useDispatch()
     let store = useSelector((state)=>{
         return {
             ...state.homereducer
         }
     })
     console.log(store);
   useEffect(()=>{
    dispatch(action.getlist())

   },[])
  let godetail = (item)=>{
       console.log(item);
       navigate("/detail",{
           state:item
       })
       
  }
  const onSearch = (value) => {
        // 
        dispatch(action.searchfn(value))

  
  };
  const reset = ()=>{
//    dispatch(action.getlist()) 
      window.location.href =   window.location.href
  }
  const searcehfn = (e)=>{
      setIpt(e.target.vlaue)
      clearTimeout(timmer)
       var timmer = setTimeout(()=>{
          dispatch(action.searchfn(e.target.value))
       },2000)
 
    
}
//   const fangdou = debounce(searcehfn,500)
  
  return (
    <div className='homewrap'>
        <div style={{width:"100%",height:"60px",background:"#000",position:"relitive",top:0}}></div>
         <Header></Header>
         {/* <Search
      placeholder="input search text"
      allowClear
      onSearch={onSearch}
      style={{
        width: 200,
      }}
    />
    <Button onClick={reset}>重置</Button> */}
        <input type="text" value={ipt} onChange={searcehfn}/>
        <div>
            {
                store.arr &&  store.arr.length ?  store.arr.map((item,index)=>{
                    return <div key={index} onClick={()=>godetail(item)}>
                        <img src={item.img} alt="" />
                         <h4>商品名{item.tit}</h4>
                    </div>
                }):"暂无数据"
            }
        </div>
        <div style={{height:"400px"}}></div>
    </div>
  )
}

export default Home